<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>event test</title>
</head>

<body>
    <h3>通过HTML指定事件处理程序</h3>
    <button onclick="handleHTMLClick(event)">HTML事件处理程序</button>
    <h3>通过JavaScript指定事件处理程序,浏览器自动向处理程序传入event对象</h3>
    <button id="dom0">DOM0事件处理程序</button>
    <button id="dom2">DOM2事件处理程序</button>
    <script>
        function handleHTMLClick(e) {//HTML与JavaScript代码紧密耦合
            console.log(e)//MouseEvent对象
            console.log(this)//Window对象
        }

        var dom0 = document.getElementById("dom0")
        dom0.onclick = function (a=0,b=1) {//浏览器自动传入event对象
            console.log(event)//MouseEvent对象
            console.log(event.type)
            console.log(a+",,,"+b)//[object MouseEvent],,,1
            console.log(this)//element对象
        }
        // dom0.onclick = null//删除事件处理程序

        var dom2 = document.getElementById("dom2")
        dom2.addEventListener('click', handleDOM2Click, false)//事件名，处理函数，布尔值（true：捕获阶段调用，false：冒泡阶段）
        function handleDOM2Click(a=0,b=1) {//浏览器自动传入event对象
            console.log(event)//MouseEvent对象
            console.log(event.type)
            console.log(a+",,,"+b)//[object MouseEvent],,,1
            console.log(this)//element对象
        }
        //dom2.removeEventListener('click', handleDOM2Click, false)//移除事件处理程序，参数要相同
    </script>

    <div id="myBox">当你右键点击我时，会出现自定义事件，当你单击时，自定义取消。</div>
    <ul class="lists">
        <li>
            <a href="www.baidu.com">百度一下，你就知道</a>
        </li>
        <li>
            <a href="www.google.com">Google</a>
        </li>
        <li>
            <a href="cn.bing.com">必应</a>
        </li>
        <li>努力学习，好好工作</li>
        <li>月薪50k</li>
    </ul>
    <script>
        window.onload = function () {
            let menu = document.querySelector('.lists'),
                myBox = document.getElementById('myBox');
            myBox.addEventListener('contextmenu', function(event){
                // 阻止浏览器鼠标右击事件。
                event.preventDefault();
                menu.style.visibility = 'visible';
                menu.style.left = event.clientX + 'px';
                menu.style.right = event.clientY + 'px';
            }, false);
            document.addEventListener('click', function (event) {
                menu.style.visibility = 'hidden';
            });
        }
    </script>
</body>

</html>